<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节点的插入 -->
     <div>
        <p class = "p1">这是一个p1标签</p>
        <p class = "p2">这是一个p2标签</p>
        <p class = "p3">这是一个p3标签</p>
     </div>
</body>
<script>
    let element = document.createElement("h3");
    element.innerHTML = "这是插入的节点内容";
    let div = document.querySelector("div");
    div.appendChild(element);//插入到最后

    let new_node = document.createElement("p");
    new_node.innerHTML = "这是一个新p标签";
    div.insertBefore(new_node,document.querySelector(".p1"))//插入到p1之前
    div.insertBefore(new_node,document.querySelector(".p2"))
    div.insertBefore(new_node,document.querySelector(".p3"))
    //当多个插入时，只有最后一个产生作用
    //div.insertBefore(new_node,null)//插入到最后
    //插入完成后，修改内容，会一同修改。
    element.innerHTML = "这是插入的节点后修改的内容";
</script>
</html>